<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addHost,HostServer } from '../../../api/application'

const dialogFormVisible = ref(false)
const formLabelWidth = '80px'
const formTitle = ref('添加应用主机')
const form = reactive<HostServer>({
  id: '0',
  hostName: '',
  ip: '',
  communicationPort: 3389,
  domain: '',
  hostAlias: '',
  status: 1,
  addType: 2
})
defineExpose({
  formTitle,
  form,
  dialogFormVisible
})

const submitButton = () => {
  addHost(form).then(res => {
    console.log(res)
    dialogFormVisible.value = false
  })
}


</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="formTitle">
    <el-form :model="form">
      <el-form-item label="主机别名" :label-width="formLabelWidth">
        <el-input v-model="form.hostAlias" />
      </el-form-item>
      <el-form-item label="主机名称" :label-width="formLabelWidth">
        <el-input v-model="form.hostName" />
      </el-form-item>
      <el-form-item label="主机IP" :label-width="formLabelWidth">
        <el-input v-model="form.ip" />
      </el-form-item>
      <el-form-item label="通信端口" :label-width="formLabelWidth">
        <el-input v-model="form.communicationPort" />
      </el-form-item>
      <el-form-item label="域" :label-width="formLabelWidth">
        <el-input v-model="form.domain" />
      </el-form-item>
      <el-form-item label="主机IP" :label-width="formLabelWidth">
        <el-input v-model="form.ip" />
      </el-form-item>
      <el-form-item label="主机状态" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio :label=1>正常</el-radio>
          <el-radio :label=2>维护</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="添加方式" :label-width="formLabelWidth">
        <el-radio-group v-model="form.addType">
          <el-radio :label=1>手动添加</el-radio>
          <el-radio :label=2>自动注册</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="submitButton">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
